<script setup>
import { onMounted } from "vue";
import { initMap } from "../module/Class_Map.js";
import { useLayerControl } from "../composables/useLayerControl.js";
import { useDateTimeControl } from "../composables/useDateTimeControl.js";

// 使用组合式函数
const {
  activeLayerStates,
  windSpeedDisabled,
  currentSpeedDisabled,
  seatempScalarDisabled,
  updateAllLayers,
  handleWindCheckboxChange,
  handleCurrentCheckboxChange,
  handleSeatempCheckboxChange,
  loadAllWind,
  loadAllCurrent,
  loadAllSeatemp,
  removeWind,
  removeCur,
  removeSeatemp
} = useLayerControl();

const {
  selectedDate,
  selectedTime,
  handleDateChange,
  handleTimeChange
} = useDateTimeControl();

onMounted(() => {
  initMap();
});

// 包装处理函数以传递日期时间参数
const handleWindChange = (field, checked) => {
  handleWindCheckboxChange(field, checked, selectedDate.value, selectedTime.value);
};

const handleCurrentChange = (field, checked) => {
  handleCurrentCheckboxChange(field, checked, selectedDate.value, selectedTime.value);
};

const handleSeatempChange = (field, checked) => {
  handleSeatempCheckboxChange(field, checked, selectedDate.value, selectedTime.value);
};

const handleDateChangeWrapper = () => {
  handleDateChange(updateAllLayers);
};

const handleTimeChangeWrapper = () => {
  handleTimeChange(updateAllLayers);
};

const loadAllWindWrapper = () => {
  loadAllWind(selectedDate.value, selectedTime.value);
};

const loadAllCurrentWrapper = () => {
  loadAllCurrent(selectedDate.value, selectedTime.value);
};

const loadAllSeatempWrapper = () => {
  loadAllSeatemp(selectedDate.value, selectedTime.value);
};
</script>

<template>
  <!-- 日期时间选择器 -->
  <div class="control-panel">
    <div class="control-section">
      <h4>日期时间选择</h4>
      <div class="datetime-controls">
        <a-date-picker 
          v-model:value="selectedDate" 
          @change="handleDateChangeWrapper"
          placeholder="选择日期"
          format="YYYY-MM-DD"
        />
        <a-select 
          v-model:value="selectedTime" 
          @change="handleTimeChangeWrapper"
          style="width: 100px;"
          placeholder="选择时间"
        >
          <a-select-option value="00">00时</a-select-option>
          <a-select-option value="06">06时</a-select-option>
          <a-select-option value="12">12时</a-select-option>
          <a-select-option value="18">18时</a-select-option>
        </a-select>
        <span class="current-selection">当前选择: {{ selectedDate.format('YYYY-MM-DD') }} {{ selectedTime }}时</span>
      </div>
    </div>

    <!-- 风场控制 -->
    <div class="control-section">
      <h4>风场控制</h4>
      <div class="checkbox-group">
        <a-checkbox 
          v-model:checked="activeLayerStates.wind.particle" 
          @change="(e) => handleWindChange('particle', e.target.checked)"
        >
          粒子流
        </a-checkbox>
        <a-checkbox 
          v-model:checked="activeLayerStates.wind.speed" 
          @change="(e) => handleWindChange('speed', e.target.checked)"
          :disabled="windSpeedDisabled"
        >
          速度场
        </a-checkbox>
        <a-checkbox 
          v-model:checked="activeLayerStates.wind.arrow" 
          @change="(e) => handleWindChange('arrow', e.target.checked)"
        >
          箭头
        </a-checkbox>
        <a-checkbox 
          v-model:checked="activeLayerStates.wind.feather" 
          @change="(e) => handleWindChange('feather', e.target.checked)"
        >
          风羽
        </a-checkbox>
        <a-checkbox 
          v-model:checked="activeLayerStates.wind.label" 
          @change="(e) => handleWindChange('label', e.target.checked)"
        >
          数值标签
        </a-checkbox>
      </div>
      <div class="action-buttons">
        <a-button type="primary" size="small" @click="loadAllWindWrapper">全选</a-button>
        <a-button type="default" size="small" @click="removeWind">清除</a-button>
      </div>
    </div>
    
    <!-- 洋流控制 -->
    <div class="control-section">
      <h4>洋流控制</h4>
      <div class="checkbox-group">
        <a-checkbox 
          v-model:checked="activeLayerStates.current.particle" 
          @change="(e) => handleCurrentChange('particle', e.target.checked)"
        >
          粒子流
        </a-checkbox>
        <a-checkbox 
          v-model:checked="activeLayerStates.current.speed" 
          @change="(e) => handleCurrentChange('speed', e.target.checked)"
          :disabled="currentSpeedDisabled"
        >
          速度场
        </a-checkbox>
        <a-checkbox 
          v-model:checked="activeLayerStates.current.arrow" 
          @change="(e) => handleCurrentChange('arrow', e.target.checked)"
        >
          箭头
        </a-checkbox>
        <a-checkbox 
          v-model:checked="activeLayerStates.current.feather" 
          @change="(e) => handleCurrentChange('feather', e.target.checked)"
        >
          风羽
        </a-checkbox>
        <a-checkbox 
          v-model:checked="activeLayerStates.current.label" 
          @change="(e) => handleCurrentChange('label', e.target.checked)"
        >
          数值标签
        </a-checkbox>
      </div>
      <div class="action-buttons">
        <a-button type="primary" size="small" @click="loadAllCurrentWrapper">全选</a-button>
        <a-button type="default" size="small" @click="removeCur">清除</a-button>
      </div>
    </div>
    
    <!-- 海温控制 -->
    <div class="control-section">
      <h4>海温控制</h4>
      <div class="checkbox-group">
        <a-checkbox 
          v-model:checked="activeLayerStates.seatemp.scalar" 
          @change="(e) => handleSeatempChange('scalar', e.target.checked)"
          :disabled="seatempScalarDisabled"
        >
          标量场
        </a-checkbox>
        <a-checkbox 
          v-model:checked="activeLayerStates.seatemp.label" 
          @change="(e) => handleSeatempChange('label', e.target.checked)"
        >
          数值标签
        </a-checkbox>
      </div>
      <div class="action-buttons">
        <a-button type="primary" size="small" @click="loadAllSeatempWrapper">全选</a-button>
        <a-button type="default" size="small" @click="removeSeatemp">清除</a-button>
      </div>
    </div>
  </div>
  
  <div id="map"></div>
</template>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
  z-index: 1;
  background: #ffa50055;
}

.control-panel {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 320px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 20px;
  z-index: 1000;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.control-section {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.control-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.control-section h4 {
  margin: 0 0 12px 0;
  color: #1890ff;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.datetime-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.current-selection {
  color: #666;
  font-size: 12px;
  background: #f5f5f5;
  padding: 4px 8px;
  border-radius: 4px;
  text-align: center;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.checkbox-group .ant-checkbox-wrapper {
  font-size: 14px;
  color: #333;
}

.checkbox-group .ant-checkbox-wrapper-disabled {
  color: #999;
  cursor: not-allowed;
}

.checkbox-group .ant-checkbox-wrapper-disabled .ant-checkbox {
  background-color: #f5f5f5;
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.action-buttons .ant-btn {
  flex: 1;
  height: 28px;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .control-panel {
    width: 280px;
    left: 10px;
    top: 10px;
    padding: 15px;
  }
  
  .control-section h4 {
    font-size: 14px;
  }
  
  .checkbox-group .ant-checkbox-wrapper {
    font-size: 13px;
  }
}
</style>
